<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="add2">改变vuex数据</button>
    <h1>vuex中的计算属性  {{this.$store.getters.getCount}}</h1>
        <h1>vuex中的计算属性  {{ getCount}}</h1>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

export default {
  props: [],
  components: {},
  data() {
    return {};
  },

  methods: {
    add2() {
      //   非法 vuex改变数据的用法
      //   this.$store.state.count++
      // 这是逻辑形API  
       this.$store.commit('add',1)
      // 以下配置API
      //  this.add(1);

      // this.$store.dispatch("atime1", 1);
    },
    ...mapMutations(["add"]),
  },

  computed: {
    ...mapState(["count"]),
    ...mapGetters(["getCount"]),
  },

  watch: {},

  filters: {},

  beforeCreate() {},

  created() {},

  beforeMount() {},

  mounted() {},

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {},
};
</script>


<style  lang='scss'>
</style>
